<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="form"
        :model="packMaterialForm"
        :rules="rules"
        :disabled="operation === 0"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >
        <el-form-item
          :label="$t('depotLang.depot')"
          :prop="operation === 1 ? 'depotId' : ''"
        >
          <el-select
            v-if="operation === 1"
            v-model="packMaterialForm.depotId"
            :placeholder="$t('pleaseSelect')"
            style="width: 100%"
          >
            <el-option
              v-for="item in depotList"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>
          <div v-else style="margin-left: 5px">
            {{ packMaterialForm.depotCodeAndName }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('materialsLang.packagingMaterialName')"
          :prop="operation === 1 ? 'packName' : ''"
        >
          <el-input
            v-if="operation === 1"
            v-model="packMaterialForm.packName"
            :placeholder="$t('pleaseEnter')"
            style="width: 100%"
          />
          <div v-else style="margin-left: 5px">
            {{ packMaterialForm.packName }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('materialsLang.packagingMaterial')"
          prop="packMaterial"
        >
          <el-select
            v-model="packMaterialForm.packMaterial"
            :placeholder="$t('pleaseSelect')"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in depotPackMaterialOptions"
              :key="item.value"
              :value="item.value"
              :label="$t('statusLang.' + item.title)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :prop="operation === 1 ? 'packType' : ''"
          :label="$t('materialsLang.packagingMaterialType')"
        >
          <el-select
            v-if="operation === 1"
            v-model="packMaterialForm.packType"
            :placeholder="$t('pleaseSelect')"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in depotPackTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="$t('statusLang.' + item.title)"
            />
          </el-select>
          <div v-else style="margin-left: 5px">
            {{
              this.$t(
                "statusLang." +
                  getTitleByValue(
                    depotPackTypeOptions,
                    packMaterialForm.packType
                  )
              )
            }}
          </div>
        </el-form-item>
        <div
          v-if="
            packMaterialForm.packType === depotPackTypeDict.CUSTOMER_PACK.value
          "
        >
          <el-form-item
            :label="$t('harvestLang.customerName')"
            :prop="operation === 1 ? 'customerId' : ''"
          >
            <el-select
              v-if="operation === 1"
              v-model="packMaterialForm.customerId"
              :placeholder="$t('pleaseSelect')"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in customerOptionList"
                :key="item.value"
                :value="item.value"
                :label="item.title"
              />
            </el-select>
            <div v-else style="margin-left: 5px">
              {{ packMaterialForm.customerCodeAndName }}
            </div>
          </el-form-item>
        </div>
        <el-form-item :label="$t('unitLang.weight')" prop="packWeight">
          <el-input
            v-model="packMaterialForm.packWeight"
            type="number"
            :step="0.01"
            :placeholder="$t('pleaseEnter') + $t('unitLang.weight') + '(KG)'"
          />
        </el-form-item>
        <el-form-item
          :label="
            $t('unitLang.length') +
              '*' +
              $t('unitLang.width') +
              '*' +
              $t('unitLang.height')
          "
          prop="packLength,packWidth,packHeight"
        >
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item prop="packLength">
                <el-input
                  v-model="packMaterialForm.packLength"
                  type="number"
                  step="0.01"
                  prop="packLength"
                  :placeholder="
                    $t('pleaseEnter') + $t('unitLang.length') + '(CM)'
                  "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <span> * </span>
            <el-col :span="8">
              <el-form-item prop="packWidth">
                <el-input
                  v-model="packMaterialForm.packWidth"
                  type="number"
                  step="0.01"
                  prop="packWidth"
                  :placeholder="
                    $t('pleaseEnter') + $t('unitLang.width') + '(CM)'
                  "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <span> * </span>
            <el-col :span="8">
              <el-form-item prop="packHeight">
                <el-input
                  v-model="packMaterialForm.packHeight"
                  type="number"
                  step="0.01"
                  prop="packHeight"
                  :placeholder="
                    $t('pleaseEnter') + $t('unitLang.height') + '(CM)'
                  "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item :label="$t('number')" prop="packNum">
          <el-input
            v-model.number="packMaterialForm.packNum"
            :placeholder="$t('pleaseEnter') + $t('number')"
            onkeyup="value=value.replace(/[^\d]/g,'')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('goodsSKULang.storageLocation')"
          prop="locationCode"
        >
          <el-input
            v-model="packMaterialForm.locationCode"
            :placeholder="
              $t('pleaseEnter') + $t('goodsSKULang.storageLocation')
            "
          />
        </el-form-item>
        <el-form-item
          :label="$t('materialsLang.procurementCost')"
          prop="procurementCost"
        >
          <el-input
            v-model="packMaterialForm.procurementCost"
            type="number"
            step="0.01"
            :placeholder="
              $t('pleaseEnter') + $t('materialsLang.procurementCost')
            "
          />
        </el-form-item>
        <el-form-item :label="$t('materialsLang.currency')" prop="currencyId">
          <el-select
            v-model="packMaterialForm.currencyId"
            :placeholder="$t('pleaseSelect')"
            style="width: 100%"
          >
            <el-option
              v-for="item in currencyList"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('materialsLang.sellingPrice')"
          prop="sellPrice"
        >
          <el-input
            v-model="packMaterialForm.sellPrice"
            type="number"
            step="0.01"
            :placeholder="$t('pleaseEnter') + $t('materialsLang.sellingPrice')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from 'await-to-js'
import { getDepotList } from '@/api/business/depotManage/depot'
import { depotPackMaterialDict, depotPackTypeDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { selectCustomerBaseInfoList } from '@/api/business/customer/customer.js'
import { selectAllCurrencyList } from '@/api/currency/currency'
import {
  addDepotPack,
  modifyDepotPack,
  getDepotPackDetail
} from '@/api/business/packagingMaterials/material'
export default {
  name: 'InfoForm',
  props: {
    value: {
      type: Number,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看 1 新增 2 修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      depotList: [], // 仓库
      packMaterialForm: {
        depotId: null,
        packName: null,
        packMaterial: null,
        packType: null,
        customerId: null,
        packWeight: null,
        packLength: null,
        packWidth: null,
        packHeight: null,
        packNum: null,
        locationCode: null,
        procurementCost: null,
        currencyId: null,
        sellPrice: null
      },
      customerOptionList: [], // 客户名称下拉
      getTitleByValue: getTitleByValue,
      depotPackTypeDict: depotPackTypeDict,
      currencyList: [], // 币种下拉
      depotPackTypeOptions: getDictOptionList(depotPackTypeDict), // 包材类型下拉
      depotPackMaterialOptions: getDictOptionList(depotPackMaterialDict), // 包材材质下拉
      rules: {
        depotId: {
          required: true,
          message: this.$t('pleaseSelect') + this.$t('depotLang.depot'),
          trigger: 'change'
        },
        packName: {
          required: true,
          message:
            this.$t('pleaseEnter') +
            this.$t('materialsLang.packagingMaterialName'),
          trigger: 'blur'
        },
        packMaterial: {
          required: true,
          message:
            this.$t('pleaseSelect') +
            this.$t('materialsLang.packagingMaterial'),
          trigger: 'change'
        },
        packType: {
          required: true,
          message:
            this.$t('pleaseSelect') +
            this.$t('materialsLang.packagingMaterialType'),
          trigger: 'change'
        },
        customerId: {
          required: true,
          message: this.$t('pleaseSelect') + this.$t('customerLang.customer'),
          trigger: 'change'
        },
        packWeight: [
          {
            required: true,
            message: this.$t('pleaseEnter') + this.$t('unitLang.weight'),
            trigger: 'blur'
          },
          {
            required: true,
            pattern: /^[0-9|^\\.]/,
            message:
              this.$t('cannotBeNegative') + '  ' + this.$t('pleaseCheck'),
            trigger: 'blur'
          }
        ],
        packLength: [
          {
            required: true,
            message: this.$t('pleaseEnter') + this.$t('unitLang.length'),
            trigger: 'blur'
          },
          {
            pattern: /^[0-9|^\\.]/,
            message:
              this.$t('cannotBeNegative') + '  ' + this.$t('pleaseCheck'),
            trigger: 'blur'
          }
        ],
        packWidth: [
          {
            required: true,
            message: this.$t('pleaseEnter') + this.$t('unitLang.width'),
            trigger: 'blur'
          },
          {
            pattern: /^[0-9|^\\.]/,
            message:
              this.$t('cannotBeNegative') + '  ' + this.$t('pleaseCheck'),
            trigger: 'blur'
          }
        ],
        packHeight: [
          {
            required: true,
            message: this.$t('pleaseEnter') + this.$t('unitLang.height'),
            trigger: 'blur'
          },
          {
            pattern: /^[0-9|^\\.]/,
            message:
              this.$t('cannotBeNegative') + '  ' + this.$t('pleaseCheck'),
            trigger: 'blur'
          }
        ],
        packNum: [
          {
            required: true,
            message: this.$t('pleaseEnter') + this.$t('number'),
            trigger: 'blur'
          }
          // {
          //   pattern: /[^0-9]/g,
          //   message:
          //     this.$t("cannotBeNegative") + "  " + this.$t("pleaseCheck"),
          //   trigger: "blur",
          // },
        ],
        locationCode: {
          required: true,
          message:
            this.$t('pleaseEnter') + this.$t('goodsSKULang.storageLocation'),
          trigger: 'blur'
        },
        procurementCost: [
          {
            required: true,
            message:
              this.$t('pleaseEnter') + this.$t('materialsLang.procurementCost'),
            trigger: 'blur'
          },
          {
            pattern: /^[0-9|^\\.]/,
            message:
              this.$t('cannotBeNegative') + '  ' + this.$t('pleaseCheck'),
            trigger: 'blur'
          }
        ],
        currencyId: {
          required: true,
          message: this.$t('pleaseSelect') + this.$t('materialsLang.currency'),
          trigger: 'change'
        },
        sellPrice: [
          {
            required: true,
            message:
              this.$t('pleaseEnter') + this.$t('materialsLang.sellingPrice'),
            trigger: 'blur'
          },
          {
            pattern: /^[0-9|^\\.]/,
            message:
              this.$t('cannotBeNegative') + '  ' + this.$t('pleaseCheck'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
    this.getDepotList()
    this.getCustomerNameList()
    this.selectAllCurrencyList()
  },
  methods: {
    // 数据回显
    async getData() {
      if (!this.value || this.operation === 1) return
      const res = await getDepotPackDetail({
        packId: this.value
      })
      if (!res || res.returnCode === null) return
      // console.log(res, "详情");
      this.packMaterialForm = res.data
    },
    // 获取仓库下拉
    async getDepotList() {
      const { data } = await getDepotList()
      // console.log(data);
      this.depotList = data
    },
    // 获取客户名称下拉
    async getCustomerNameList() {
      const { data } = await selectCustomerBaseInfoList()
      // console.log(data);
      this.customerOptionList = data
    },
    // // 获取币种下拉
    async selectAllCurrencyList() {
      const { data } = await selectAllCurrencyList()
      // console.log(data, "币种");
      this.currencyList = data
    },
    async handleSubmit() {
      const [err] = await to(this.$refs.form.validate())
      if (err !== null) {
        this.$message({
          type: 'error',
          message: this.$t('pleaseCheck') + this.$t('required')
        })
      } else {
        // 新增
        if (this.operation === 1) {
          const res = await addDepotPack({
            ...this.packMaterialForm
          })
          console.log(res)
          if (res.data === null && res.returnCode === 10000) {
            this.$message.success(this.$t('addSuccess'))
            this.$emit('close')
            this.$emit('update:operation', 2)
          } else {
            this.$message.error(this.$t('addFail'))
          }
        } else if (this.operation === 2) {
          const res = await modifyDepotPack({
            ...this.packMaterialForm
          })
          console.log(res)
          if (res.data === null && res.returnCode === 10000) {
            this.$message.success(this.$t('modifiedSuccess'))
            this.$emit('close')
          } else {
            this.$message.error(res.returnMsg)
          }
        }
      }
    },
    // 重置表单
    reset() {
      this.packMaterialForm = {
        depotId: null,
        packName: null,
        packMaterial: null,
        packType: null,
        customerId: null,
        packWeight: null,
        packLength: null,
        packWidth: null,
        packHeight: null,
        packNum: null,
        locationName: null,
        procurementCost: null,
        currencyId: null,
        sellPrice: null
      }
      this.$refs.form.resetFields()
    },

    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}
</script>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
